<template>
    <section>
        <el-col :span="24">
            <el-tabs type="border-card" v-model="tab">
                <el-tab-pane v-for="(item, index) in tabList" :key="index" :name="item.name" :label="item.label">
                    <el-button size="small" type="warning" class="el-icon-plus" @click="addBtn">新增{{tab==3?'执行标准':'安全类别'}}</el-button>
                    <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="small">
                        <el-table-column v-if="tab==3" label="执行标准(中文)" prop="title_des"></el-table-column>
                        <el-table-column :label="tab==3?'执行标准':'安全类别'" prop="title"></el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="{ row }">
                                <el-button type="text" @click="editBtn(row)" class="el-icon-edit"></el-button>
                                <el-button type="text" style="color: red" @click="delBtn(row.id)" class="el-icon-delete"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--翻页栏-->
                    <div style="margin-top: 4px;overflow: hidden;float: right;">
                        <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-col>

        <!--编辑、新增-->
        <el-dialog :title="(addForm.id ? '修改':'新增')+(tab==3?'执行标准':'安全类别')" width="500px" :visible.sync="addVisible" :close-on-press-escape="false" :close-on-click-modal="false">
            <el-form label-position="left" label-width="110px">
                <el-form-item v-if="tab==3" label="执行标准(中文)">
                    <el-input size="small" v-model.trim="addForm.title_des" placeholder="请输入执行标准(中文)" clearable></el-input>
                </el-form-item>
                <el-form-item :label="tab==3?'执行标准':'安全类别'">
                    <el-input size="small" v-model.trim="addForm.title"  placeholder="请输入执行标准" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="addVisible=false" plain>退 出</el-button>
                <el-button type="primary" size="small" @click="saveBtn" :loading="saveLoading">保 存</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import {safetyList, safetyDel, safetySave} from "@/api/produce/safety";

export default {
    name: "produce_tag_safety",
    data() {
        return {
            tableHeight: window.innerHeight - 250,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            tab: "3",
            tabList: [{name: "3", label:"执行标准"}, {name: "4", label:"安全类别"}],
            addVisible: false,
            saveLoading: false,
            addForm: {},
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{
        tab(newVal, oldVal){
            this.searchBtn();
        }
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit,
                types: this.tab
            };
            this.loading = true;
            safetyList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        //删除按钮
        delBtn(id){
            this.$confirm("数据将被永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                safetyDel({id: id}).then((res) =>{
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success("删除成功")
                        this.getData();
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.loading = false;
                })
            }).catch(() => {});
        },
        addBtn(){
            if(this.tab == 3){
                this.addForm = {title_des: "", title: "", types: 3};
            }
            if(this.tab == 4){
                this.addForm = {title: "", types: 4};
            }
            this.addVisible = true;
        },
        editBtn(row){
            this.addForm = JSON.parse(JSON.stringify(row));
            this.addVisible = true;
        },
        saveBtn(){
            if(this.tab == 3 && (this.addForm.title == "" || this.addForm.title_des == "")){
                this.$message.warning("内容不能为空");return;
            }
            if(this.tab == 4 && (this.addForm.title == "")){
                this.$message.warning("内容不能为空");return;
            }
            this.saveLoading = true;
            safetySave({data: JSON.stringify(this.addForm)}).then((res) => {
                this.saveLoading = false;
                if(res.code === 0){
                    this.addVisible = false;
                    this.$message.success("保存成功");
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.saveLoading = false;
            })
        },
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>

</style>
